<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back" ><i class="layui-icon">&#xe65c;</i>返回</button>
    </div>
    <hr/>
    <div class="layui-row">
        <div class="layui-col-md2">
            <b>商品id：</b><span th:text="${goods.id}"></span>
        </div>
        <div class="layui-col-md2">
            <b>商品名：</b><span th:text="${goods.name}"></span>
        </div>
    </div>
    <br>
    <div class="layui-row">
        <div class="layui-col-md3">
            <b>价格：</b><span th:text="${goods.price}"></span>
        </div>
        <div class="layui-col-md3">
            <b>库存：</b><span th:text="${goods.num}"></span>
        </div>
        <div class="layui-col-md3">
            <b>销售量：</b><span th:text="${goods.salenum}"></span>
        </div>
        <div class="layui-col-md3">
            <b>收藏数：</b><span th:text="${goods.collectionnum}"></span>
        </div>
    </div>
    <br>
    <div class="layui-row">
        <div class="layui-col-md6">
            <b>商品标题：</b><span th:text="${goods.title}"></span>
        </div>
        <div class="layui-col-md6">
            <b>商品子标题：</b><span th:text="${goods.subtitle}"></span>
        </div>
    </div>
    <hr>
    <div class="layui-row">
        <div class="layui-col-md6">
            <b>封面图：</b><br>
            <span th:if="${goods.coverimg==null}">暂无封面图</span>
            <img th:src="${goods.coverimg}" th:if="${goods.coverimg!=null}" width="40%" alt="封面图">
        </div>
        <div class="layui-col-md6">
            <b>轮播图：</b><br>
            <span th:if="${imgs==null}">暂无轮播图</span>
            <div class="layui-carousel" id="test1" th:if="${imgs!=null}">
                <div carousel-item>
                    <div th:each="img :${imgs}"><img th:src="${img}"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-12">
            <b>详情：</b><button class="layui-btn" id="detail">点击查看</button>
        </div>
    </div>
</div>
<script th:inline="javascript">
    layui.use(['carousel','layer'], function() {
        var $ = layui.$,
            layer = layui.layer,
            carousel = layui.carousel;

        /**
         * 轮播图
         */
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
        });

        /**
         * 查看详情按钮
         */
        $("#detail").click(function () {
            var contentDetail = [[${goods.detail}]];
            // alert(contentDetail);
            if(contentDetail!=null){
                layer.open({
                    type: 1,
                    title: '商品详情介绍',
                    area: ['800px','700px'],
                    content: contentDetail
                });
            }else {
                layer.msg("暂无详情");
            }
        })

        /**
         * 返回按钮
         * */
        $("#back").click(function () {
            $("#content-body").load("goods/goGoodsmgr");
        })
    })
</script>
</body>
</html>